<#import "/spring.ftl" as spring /> <#import
"../layout/defaultLayout.ftl" as layout> <@layout.defaultLayout
styles=["bootstrap-table/bootstrap-table.min.css",
"bootstrap-validator/css/bootstrapValidator.css",
"bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css"]
scripts=["bootstrap-table/bootstrap-table.min.js",
"bootstrap-table/locale/bootstrap-table-zh-CN.min.js",
"bootstrap-validator/validator.js",
"jquery/serializejson/jquery.serializejson.min.js",
"util/jquery-dateFormat.min.js",
"bootstrap-table/extensions/export/bootstrap-table-export.min.js",
"bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js",
"bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js",
"bootstrap-table/extensions/editable/bootstrap-table-editable.js",
"x-editable/bootstrap3-editable/js/bootstrap-editable.js",
"bootstrap-validator/js/bootstrapValidator.js", "util/tableExport.js"]>
<body>
	<div class="container-fluid"
		style="background-color: white; padding: 30px; width: 80%">

		<fieldset>
			<legend>
				<span class="glyphicon glyphicon-list-alt"></span>&nbsp;&nbsp;<@spring.message 'chart.config'/>
			</legend>
			
			<form name="configForm" id="configForm" class="form-horizontal">
				<input type=text name="reportId" id="reportId" value='${reportId}' hidden="true">
				<input type=text name="reportCode" id="reportCode" value='${reportCode}' hidden="true">
			<#if lineChart == '101' || barChart == '102' >
				<div class="form-group">
				
					<label for="name" class="col-sm-3 control-label"
						style="text-align: left; font-size: 18px"><span
						class="glyphicon glyphicon-list-alt"></span>&nbsp;&nbsp;<@spring.message 'chart.barAndLineConfig'/></label>
				</div>
				<div class="form-group">
					<label for="name" class="col-sm-2 control-label"><@spring.message 'chart.mainTitle'/></label>
					<div class="col-sm-8">
						<input type="text" id="title" name="title" class="form-control" />
					</div>

				</div>
				<div class="form-group">
					<label for="code" class="col-sm-2 control-label"><@spring.message 'chart.subTitle'/></label>
					<div class="col-sm-8">
						<input type="text" id="subTitle" name="subTitle"
							class="form-control" />
					</div>
				</div>
				<div class="form-group">
					<label for="name" class="col-sm-2 control-label"><@spring.message 'chart.abscissaMark'/></label>
					<div class="col-sm-3">
						<input type="text" name="xAxesTitle" id="xAxesTitle"
							class="form-control" />
					</div>
					<label class="col-sm-2 control-label"><@spring.message 'chart.ordinateMark'/></label>
					<div class="col-sm-3">
						<input type="text" name="yAxesTitle" id="yAxesTitle"
							class="form-control" />
					</div>
				</div>
				<div class="form-group">
					<label for="name" class="col-sm-2 control-label"><@spring.message 'chart.xAxisDimensionCode'/><br><@spring.message 'chart.seperateSemicolon'/>&nbsp;&nbsp;&nbsp;</label>
					<div class="col-sm-8">
						<input type="text" name="xDataKeys" id="xDataKeys"
							class="form-control" />
					</div>
					
				</div>
				
				<div class="form-group">
				<label class="col-sm-2 control-label"><@spring.message 'chart.yAxisDimensionCode'/><br><@spring.message 'chart.seperateSemicolon'/>&nbsp;&nbsp;&nbsp;</label>
					<div class="col-sm-8">
						<input type="text" name="yDataKeys" id="yDataKeys"
							class="form-control" />
					</div>
				</div>
				</#if>
				<#if pieChart == '103' >
				<div class="form-group">
					<label for="name" class="col-sm-3 control-label"
						style="text-align: left; font-size: 18px"><span
						class="glyphicon glyphicon-list-alt"></span>&nbsp;&nbsp;<@spring.message 'chart.pieChartConfig'/></label>
				</div>
				<div class="form-group">
					<label for="name" class="col-sm-2 control-label"><@spring.message 'chart.title'/></label>
					<div class="col-sm-8">
						<input type="text" id="pieTitle" name="pieTitle"
							class="form-control" />
					</div>
				</div>

				<div class="form-group">
					<label for="name" class="col-sm-2 control-label"><@spring.message 'chart.chartBorderWidth'/></label>
					<div class="col-sm-3">
						<input type="number" name="borderWidth" id="borderWidth"
							class="form-control" value="1" />
					</div>
					<label for="name" class="col-sm-2 control-label"><@spring.message 'chart.chartBorderColor'/></label>
					<div class="col-sm-3">
						<input type="color" name="borderColor" id="borderColor"
							class="form-control" />
					</div>
				</div>
				</#if>
			</form>
		</fieldset>
		<div class="form-group">
			<div class="col-sm-10" style="text-align: right">
				<button class="btn btn-success" style="width: 100px;" id="commit"><@spring.message 'button.submit'/></button>
			</div>
		</div>

	</div>
</body>

<script type="text/javascript">
<!--
	//-->

	$(function() {
		$('#commit').click(function() {
			$('#configForm').data('bootstrapValidator').validate();
			if (!$('#configForm').data('bootstrapValidator').isValid()) {
				return;
			}
			var obj = $('#configForm').serializeJson();
			var jsonString = JSON.stringify(obj);
			$.ajax({
				url : '${request.contextPath}/report/chartconfig/addChartConfig',
				type : 'post',
				contentType : 'application/json',
				data : jsonString,
				dataType : 'json',
				success : function(data) {
					/* if (data.code == '000') {
						alert('成功！');
					} else {
						alert("添加失败！");
					} */
					location.href = "${request.contextPath}/report/conditionlist/"+$("#reportCode").val();
				}
				
			});
		});
	});

	
	$(function(){
		 $('#configForm').bootstrapValidator({
		　　　　　　　	message: 'This value is not valid',
		            feedbackIcons: {
		                　　　　　　　　valid: 'glyphicon glyphicon-ok',
		                　　　　　　　　invalid: 'glyphicon glyphicon-remove',
		                　　　　　　　　validating: 'glyphicon glyphicon-refresh'
		            　　　　　　　　   },
		                       
		            fields: {
		                title: {
		                    validators: {
		                        notEmpty: {
		                            message: "<@spring.message 'chart.barAndLineTitleNotNull'/>"
		                        }/* ,
		                        stringLength: {
	                                max: 256,
	                                min:6,
	                                message: '长度必须在6-256之间'
	                            } */
		                    }
		                },
		                subTitle: {
		                    validators: {
		                        notEmpty: {
		                            message: "<@spring.message 'chart.barAndLineSubTitleNotNull'/>"
		                        }/* ,
		                        stringLength: {
	                                max: 256,
	                                min:6,
	                                message: '长度必须在6-256之间'
	                            } */
		                    }
		                },
		                xAxesTitle: {
		                    validators: {
		                        notEmpty: {
		                            message: "<@spring.message 'chart.abscissaTitleNotNull'/>"
		                        }/* ,
		                        stringLength: {
	                                max: 128,
	                                min:3,
	                                message: '长度必须在3-128之间'
	                            } */
		                    }
		                },
		                yAxesTitle: {
		                    validators: {
		                        notEmpty: {
		                            message: "<@spring.message 'chart.ordinateMarkTitleNotNull'/>"
		                        }/* ,
		                        stringLength: {
	                                max: 128,
	                                min:3,
	                                message: '长度必须在3-128之间'
	                            } */
		                    }
		                },
		                
		                pieTitle: {
		                    validators: {
		                        notEmpty: {
		                            message: "<@spring.message 'chart.pieChartTitleNotNull'/>"
		                        }/* ,
		                        stringLength: {
	                                max: 256,
	                                min:6,
	                                message: '长度必须在6-256之间'
	                            } */
		                    }
		                },
		                borderWidth: {
		                    validators: {
		                        notEmpty: {
		                            message: "<@spring.message 'chart.barAndLineBorderWidthNotNull'/>"
		                        }
		                    }
		                },
		                xDataKeys: {
		                    validators: {
		                        notEmpty: {
		                            message: "<@spring.message 'chart.xAxisDimensionCodeNotNull'/>"
		                        }
		                    }
		                },
		                yDataKeys: {
		                    validators: {
		                        notEmpty: {
		                            message: "<@spring.message 'chart.yAxisDimensionCodeNotNull'/>"
		                        }
		                    }
		                },
		                
		            }});
		
	});
	

	//改进封装，使序列化表单支持多选框
	(function($) {
		$.fn.serializeJson = function() {
			var serializeObj = {};
			var array = this.serializeArray();
			var str = this.serialize();
			$(array).each(
					function() {
						if (serializeObj[this.name]) {
							if ($.isArray(serializeObj[this.name])) {
								serializeObj[this.name].push(this.value);
							} else {
								serializeObj[this.name] = [
										serializeObj[this.name], this.value ];
							}
						} else {
							serializeObj[this.name] = this.value;
						}
					});
			return serializeObj;
		};
	})(jQuery);
</script>

</@layout.defaultLayout>
